import React, { useEffect, useRef } from 'react';
import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';

const NoUiSlider = ({
  start,
  connect = false,
  direction = 'ltr',
  orientation = 'horizontal',
  range,
  margin,
  limit,
  padding,
  step,
  format,
  tooltips,
  animate = true,
  animationDuration = 300,
  snap = false,
  behaviour = 'tap',
  ariaFormat,
  keyboardSupport = true,
  cssPrefix = 'noUi-',
  cssClasses,
  handleAttributes,
  pips,
  onChange,
  onUpdate,
  onStart,
  onEnd,
  onSlide,
  onSet,
  onDrag,
  onHover,
}) => {
  const sliderRef = useRef(null);
  const sliderInstance = useRef(null);
  const activePipsRef = useRef([]);

  // 初始化滑块
  useEffect(() => {
    if (!sliderRef.current) return;

    const options = {
      start,
      connect,
      direction,
      orientation,
      range,
      margin,
      limit,
      padding,
      step,
      format,
      tooltips,
      animate,
      animationDuration,
      snap,
      behaviour,
      ariaFormat,
      keyboardSupport,
      cssPrefix,
      cssClasses,
      handleAttributes,
      pips,
    };

    // Initialize noUiSlider
    sliderInstance.current = noUiSlider.create(sliderRef.current, options);

    // 初始化激活的刻度
    const updateActivePips = (values, handle) => {
      // 移除当前激活的刻度
      if (activePipsRef.current[handle]) {
        activePipsRef.current[handle].classList.remove('active-pip');
      }

      // 匹配格式化后的值
      const dataValue = Math.round(values[handle]);

      // 找到匹配的刻度值元素
      const newActivePip = sliderRef.current.querySelector(`.noUi-value[data-value="${dataValue}"]`);
      
      // 添加激活状态
      if (newActivePip) {
        newActivePip.classList.add('active-pip');
        activePipsRef.current[handle] = newActivePip;
      }
    };

    // 初始化时设置激活的刻度
    start.forEach((value, index) => {
      updateActivePips(start, index);
    });

    // Add event listeners
    if (onChange) {
      sliderInstance.current.on('change', (values, handle) => {
        updateActivePips(values, handle);
        onChange(values, handle);
      });
    }
    if (onUpdate) {
      sliderInstance.current.on('update', onUpdate);
    }
    if (onStart) {
      sliderInstance.current.on('start', onStart);
    }
    if (onEnd) {
      sliderInstance.current.on('end', onEnd);
    }
    if (onSlide) {
      sliderInstance.current.on('slide', onSlide);
    }
    if (onSet) {
      sliderInstance.current.on('set', onSet);
    }
    if (onDrag) {
      sliderInstance.current.on('drag', onDrag);
    }
    if (onHover) {
      sliderInstance.current.on('hover', onHover);
    }

    // Cleanup
    return () => {
      if (sliderInstance.current) {
        sliderInstance.current.destroy();
        sliderInstance.current = null;
      }
    };
  }, [
    start,
    connect,
    direction,
    orientation,
    range,
    margin,
    limit,
    padding,
    step,
    format,
    tooltips,
    animate,
    animationDuration,
    snap,
    behaviour,
    ariaFormat,
    keyboardSupport,
    cssPrefix,
    cssClasses,
    handleAttributes,
    pips,
    onChange,
    onUpdate,
    onStart,
    onEnd,
    onSlide,
    onSet,
    onDrag,
    onHover
  ]);

  // 更新滑块值
  useEffect(() => {
    if (sliderInstance.current) {
      sliderInstance.current.set(start);
      // 更新激活的刻度
      start.forEach((value, index) => {
        const dataValue = Math.round(value);
        const newActivePip = sliderRef.current.querySelector(`.noUi-value[data-value="${dataValue}"]`);
        if (newActivePip) {
          if (activePipsRef.current[index]) {
            activePipsRef.current[index].classList.remove('active-pip');
          }
          newActivePip.classList.add('active-pip');
          activePipsRef.current[index] = newActivePip;
        }
      });
    }
  }, [start]);

  return (
    <div 
      ref={sliderRef} 
      style={{
        margin: '20px 0',
        padding: '0 15px'
      }}
    />
  );
};

export default NoUiSlider; 